<template>
  <div class="register">
      <nav-bar :title="'注册'"></nav-bar>
      <div class="register-form">
          <div class="register-item">
              <img class="left-icon" src="../assets/avatar_icon.png" alt="avatar">
              <input class="input-area" type="text" v-model="nickName" placeholder="昵称(2-20字符，限制中文、字母、数字)">
              <img class="clear-icon" src="../assets/clear_icon.png" alt="clear" v-show="nickName.length>0" @click="clearInpt('nickName')">
          </div>
          <div class="register-item">
              <img class="left-icon" src="../assets/phone_icon.png" alt="phone">
              <input class="input-area" type="number" v-model="phone" placeholder="请输入手机号码">
              <img class="clear-icon" src="../assets/clear_icon.png" alt="clear" v-show="phone.length>0" @click="clearInpt('phone')">
          </div>
          <div class="register-item">
              <img class="left-icon" src="../assets/confirm_icon.png" alt="confirm">
              <input class="input-area" type="text" v-model="verifyCode" placeholder="请输入短信验证码">
              <!-- <img class="clear-icon" src="../assets/clear_icon.png" alt="clear" v-show="verifyCode.length>0" @click="clearInpt('verifyCode')"> -->
              <span v-if="defaultStute" class="get-code" @click="sendSmsCode" :style="{color: verifyCode.length>0?'#05A3FA':'#999' }">获取验证码</span>
              <span v-else class="left-time">{{leftTime}}S 重新获取</span>
          </div>
          <div class="register-item" style="padding-right:0.12rem;">
              <img class="left-icon" src="../assets/password_icon.png" alt="password">
              <input class="input-area" v-bind="{type: passStatus ? 'password':'text'}" v-model="passWord" placeholder="新密码（6-15位数字、字母组合）">
              <img class="clear-icon" src="../assets/clear_icon.png" alt="clear" :style="{visibility: passWord.length<=0 ? 'hidden': ''}" @click="clearInpt('passWord')">
              <img v-if="passStatus" src="../assets/eye_icon.png" class="clear-icon close-eye" alt="eye" @click="changePassStatus">
              <img v-else src="../assets/eye_open_icon.png" class="clear-icon open-eye" alt="eye" @click="changePassStatus">
          </div>
          <div class="register-item">
              <img class="left-icon" src="../assets/invite_icon.png" alt="invite">
              <input class="input-area" type="number" maxlength="6" v-model="staffCode" placeholder="请输入邀请码（非必填）">
          </div>
          <div v-if="nickName.length>0&&phone.length>0&&verifyCode.length>0&&passWord.length>0&&staffCode.length>0" class="submit-btn">注册</div>
          <div v-else class="submit-btn default">注册</div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import {Toast} from 'vant'
import NavBar from '@/components/NavBar'
import { setInterval, clearInterval } from 'timers';
Vue.use(Toast);
export default {
    name: 'register',
    components: {
        NavBar
    },
    data() {
        return {
            nickName: '',
            phone: '',
            verifyCode: '',
            passWord: '',
            staffCode: '',
            defaultStute: true,
            leftTime: 60,
            passStatus: true
        }
    },
    methods: {
        clearInpt(val) {
            this[val] = ''
        },
        changeDefaultStute() {
            this.defaultStute = false;
            let that = this;
            let timer = setInterval(function(){
                that.leftTime --;
                if(that.leftTime === 0) {
                    clearInterval(timer)
                    that.defaultStute = true
                }
            }, 1000)
        },
        changePassStatus() {
            this.passStatus = !this.passStatus
        },
        sendSmsCode() {
            let that = this;
            axios.post('/user/sms',qs.stringify({
                phone: that.phone
            }))
            .then(res => {
                if(res.data.status.statusCode === 0) {
                    Toast('发送验证码成功')
                    that.changeDefaultStute();
                }else {
                    Toast(res.data.status.statusReason)
                }
            })
            .catch(err => {
                Toast('没网了')
            })
        }
    }
}

</script>
<style scoped lang="scss">
.register-form {
    padding: 0.52rem 0.32rem 0.3rem 0.33rem;
    .register-item {
        display: flex;
        align-items: center;
        height: 0.42rem;
        position: relative;
        margin-top: 0.08rem;
        .left-icon {
            width: 0.16rem;
            height: 0.16rem;
            margin-right: 0.17rem;
        }
        .input-area {
            flex: 1;
            outline: none;
            border: none;
            font-size: 0.16rem;
        }
        .clear-icon {
            width: 0.14rem;
            height: 0.14rem;
            padding: 0.14rem;
        }
        .close-eye {
            height: 0.06rem;
        }
        .get-code,.left-time {
            font-size: 0.14rem;
            color: #999;
            padding-right: 0.075rem;
            min-width: 0.9rem;
        }
        &::after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 0;
            height: 1px;
            background: #ccc;
            transform: scale(1, 0.5);
        }
    }
    .submit-btn {
        background: #DD3333;
        border-radius: 0.04rem;
        height: 0.44rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.18rem;
        margin-top: 0.3rem;
    }
    .default {
        opacity: 0.5;
    }
}
</style>